<script setup>
import { ref, watch, onMounted } from 'vue'
import Dialog from '@/components/Dialog.vue'
import { useI18n } from 'vue-i18n'
import { formatEthereumAddress } from '@/utils'
import api from '@/apis'
import mitt from '@/utils/mitt'
const { t } = useI18n()
const dialog = ref(null)
mitt.on('login', () => {
  console.log(11111111111111);
  
  init()
})

//首页数据
let homeData = ref({})
let init = async () => {
  const res = await api.home.home()
  homeData.value = res
  list.value.forEach(item => {
    if (item.type === 'total_loan') {
      item.value = homeData.value.total_loan || '00.00'
    } else if (item.type === 'total_financial') {
      item.value = homeData.value.total_loan || '00.00'
    } else if (item.type === 'total_asset') {
      item.value = homeData.value.wait_repay || '00.00'
    }
  })
}


onMounted(async () => {
  init()
})

let handleAccount = () => {
  dialog.value.open()
}
const list = ref([
  {
    type: 'total_loan',
    label: t('home_loanAmount'),
    value: '1000',
    icon: 'src/static/icon/index/borrowing.png'
  },
  {
    type: 'total_asset',
    label: t('home_totalAssetAmount'),
    value: '1000',
    icon: 'src/static/icon/index/wallet.png'
  }
])
watch(
  () => t('home'),
  () => {
    list.value.forEach(item => {
      if (item.type === 'total_loan') {
        item.value = homeData.value.total_loan || '00.00'
      } else if (item.type === 'total_financial') {
        item.value = homeData.value.total_loan || '00.00'
      } else if (item.type === 'total_asset') {
        item.value = homeData.value.wait_repay || '00.00'
      }
    })
  }
)
</script>
<template>
  <div class="container">
    <div class="body">
      <div class="body_top"></div>
      <div class="body_content">
        <div class="body_content__user">
          <div class="top">
            <div class="top_avatar">
              <van-image width="43" height="43" radius="15" lazy-load
                src="https://cn.bing.com/images/search?q=%e5%9b%be%e7%89%87&id=ACF65E67D141FFA593ABCE20878922092676ABAB&FORM=IACFIR" />
            </div>
            <div class="top_info">
              <div class="address mb-4">{{ formatEthereumAddress(homeData.address)||'--' }}</div>
              <div class="vip">{{ t('home_member') }}：VIP</div>
            </div>
          </div>
          <div class="partition"></div>
          <div class="account">
            <div class="account_item">
              <div class="account_item_title mb-3">{{ t('home_accountValue') }}</div>
              <div class="account_item_money">{{ homeData.usdt||'00.00' }} USDT</div>
            </div>
            <!-- <div class="account_item">
              <div class="account_item_title mb-3">{{ t('home_credit') }}</div>
              <div class="account_item_money">{{ homeData.usdt }} USDT</div>
            </div> -->
          </div>
        </div>
        <div class="body_content__card" v-for="(item, index) in list" :key="index">
          <div class="left">
            <div class="left_value">{{ item.value }} USDT</div>
            <div class="left_title">{{ item.label }}</div>
          </div>
          <div class="right">
            <van-image width="62" height="62" lazy-load :src="item.icon" />
          </div>
        </div>
        <!-- <div class="body_content__mortgage w-100% p-15 rounded-[15px]">
          <div class="title" @click="change">{{ t('home_mortgage') }}</div>
          <div class="now w-100% flex justify-between">
            <div class="now_label opacity-70">{{ t('home_currentMortgageRate') }}</div>
            <div class="now_value text-[#00FF95]">75%</div>
          </div>
          <div class="w-100% h-9 rounded-full bg-[#4D5D73] progressbox">
            <div class="h-100% rounded-full progress w-75%"></div>
          </div>
          <div class="now w-100% flex justify-between">
            <div class="now_label opacity-70">{{ t('home_safetyLine') }}：150%</div>
            <div class="now_value opacity-70">{{ t('home_clearingLine') }}：150%</div>
          </div>
          <div class="tagbox flex">
            <div class="tag">{{ t('home_safety') }}</div>
          </div>
        </div> -->
        <div class="body_content__repayment w-100% p-15 rounded-[15px]" v-if="homeData.next_repayment">
          <div class="top flex justify-between">
            <div class="title text-[#FFFFFF]">{{ t('home_nextRepayment') }}</div>
            <div class="h-30 px-30 btn">{{ t('home_repayment') }}</div>
          </div>
          <div class="list flex flex-col gap-16 text-[14px] mb-16">
            <div class="flex justify-between">
              <div class="text-[#FFFFFF] opacity-70">{{ t('home_repaymentAmount') }}</div>
              <div class="text-[#00C8FF]">{{ homeData.next_repayment?.repay_amount }} USDT</div>
            </div>
            <div class="flex justify-between">
              <div class="text-[#FFFFFF] opacity-70">{{ t('home_dueDate') }}</div>
              <div class="text-[#00C8FF]">{{ homeData.next_repayment?.etime }}</div>
            </div>
          </div>
          <div class="flex justify-center items-center text-[#C0CFFF] font-pingfang tips px-10 text-center">
            {{ t('home_tips') }}
          </div>
        </div>
        <div class="flex justify-center items-center w-100%" v-else>
          <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="暂无还款信息" />
        </div>

      </div>
    </div>
  </div>
  <Dialog ref="dialog" />
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    min-height: calc(100vh - var(--van-nav-bar-height));
    background: url('@/static/imgs/index/index_bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 22px 15px;

    &_top {
      width: 100%;
      height: calc(432px / 2);
      background: url('@/static/imgs/index/top_bg.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    &_content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;

      &__user {
        width: 100%;
        // height: 155px;
        background: url('@/static/imgs/index/user_bg.png') no-repeat;
        background-size: 100% 100%;
        border: 1px solid #d6f5ff;
        border-radius: 15px;
        padding: 15px;

        .top {
          display: flex;
          align-items: center;

          &_info {
            margin-left: 9px;

            .address {
              font-size: 16px;
              color: #fff;
              font-family: 'PingFang SC';
              font-style: normal;
              font-weight: 400;
            }

            .vip {
              color: #fff;
              font-size: 14px;
              opacity: 0.7;
            }
          }
        }

        .partition {
          width: 100%;
          height: 1px;
          opacity: 0.2;
          background: #fff;
          margin: 20px 0;
        }

        .account {
          color: #fff;
          font-family: 'PingFang SC';
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          display: flex;
          gap: 84px;

          .account_item {
            &_title {
              // margin-bottom: 6px;
              opacity: 0.7;
            }
          }
        }
      }

      &__card {
        padding: 14px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.1);

        .left {
          &_value {
            font-family: Roboto;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            background: var(--11, linear-gradient(95deg, #fff 2.57%, #bbd3ff 99.27%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 7px;
          }

          &_title {
            color: #b7bbc7;
            font-family: 'PingFang SC';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }
      }

      &__mortgage {
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(3px);

        .title {
          margin-bottom: 20px;
          color: #fff;
          font-family: 'PingFang SC';
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .now {
          color: #fff;
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .progressbox {
          margin-top: 9px;
          margin-bottom: 16px;

          .progress {
            background: linear-gradient(90deg, #1675fd 0%, #00fffb 100%);
          }
        }

        .tagbox {
          margin-top: 15px;

          .tag {
            padding: 6px 20px;
            color: #1198fd;
            text-align: right;
            font-family: 'PingFang SC';
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            border-radius: 20px;
            background: rgba(17, 152, 253, 0.1);
          }
        }
      }

      &__repayment {
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(5px);

        .top {
          margin-bottom: 20px;

          .title {
            font-family: 'PingFang SC';
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }

          .btn {
            border-radius: 11px;
            background: var(--5,
                radial-gradient(41.55% 42.54% at 52.19% 100%,
                  #89a6ea 0%,
                  #688eff 55.29%,
                  #164bd6 100%));
            box-shadow: 0 8px 32px 0 rgba(0, 60, 255, 0.34),
              0 0 20px 0 rgba(163, 192, 255, 0.57) inset;
            color: #fff;
            text-align: center;
            font-family: 'Source Han Sans CN';
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            text-transform: uppercase;
            text-align: center;
            line-height: 30px;
          }
        }

        .list {
          font-family: 'PingFang SC';
        }

        .tips {
          min-height: 38px;
          // padding: ;
          font-size: 10px;
          border-radius: 5px;
          background: rgba(85, 115, 231, 0.4);
        }
      }
    }
  }
}
</style>
